<template>
	<div class="detal">
		<h4 style="text-align: center;color: white;">电影详情</h4>
		<hr>
		<div >
			<div>
				<ul class="header">
					<li style="text-align: left;">{{u.name}}</li>
					<li style="color: #eb6522;">{{u.price}}</li>
				</ul>
				<div class="home">
					<ul>
						<li>{{u.author}}</li>
						<li>{{u.maker}}</li>
						<li>{{u.tmake}}</li>
						<li>{{u.typeid}}</li>
					</ul>
				</div>
				<div class="homeTwo">
					<ul>
						<li>
							<details>
								<summary>简介</summary>
								{{u.info}}
							</details>
						</li>
					</ul>
				</div>
				<div class="imgs">
					<img :src="`http://127.0.0.1/api/public/showimg/${u.pic}`" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'detail',
		components: {

		},
		data() {
			return {
				act:0,
				u: {}
			}
		},
		methods:{
			getBook(){
				this.$get("/api/public/book/findById/"+ this.$route.query.id).then((resp) => {
					this.u = resp.data.data
					console.log(this.u);
				})
			}
		},
		computed: {

		},
		mounted() {
			this.getBook();
			console.log(this.$route.query.id);
			this.u.id = this.$route.query.id || ''; // 获取URL中的id参数
			console.log(this.u.id);
		},
	}
</script>

<style>
	.detal {
		width: 95%;
		height: 850px;
		background-color: #484745;
	}

	.detal li {
		text-align: center;
		color: #fafafa;
	}

	.header {
		width: 100%;
		height: 120px;
		display: flex;
	}

	.header li {
		width: 50%;
		margin-left: 45%;
		color: #c2921a;
	}

	.header li {
		width: 50%;
		color: white;
		margin-top: 30px;
		margin-left: 20px;
	}

	.home li {
		text-align: left;
		margin-left: 15px;
	}

	.homeTwo li {
		color: white;
		line-height: 2rem;
		font-size: 1rem;
		text-indent: 1.5rem;
		text-align: left;
	}

	.homeTwo aside details summary {
		color: #2c4deb;
		margin-left: 0.5rem;
	}

	.imgs {
		height: 50%;
		text-align: center;
	}
</style>